Grid ভিত্তিক লেআউট তৈরি

Web Development - অ্যাঙ্গুলার (Angular) - Angular Flex Layout |

Angular-এ গ্রিড ভিত্তিক লেআউট তৈরি করা সহজ এবং কার্যকর, বিশেষ করে যখন আপনি CSS গ্রিড বা ফ্লেক্সবক্স ব্যবহার করেন। CSS গ্রিড লেআউটের মাধ্যমে আপনি কলাম, সারি এবং এলিমেন্টগুলোকে আরও কাঙ্ক্ষিতভাবে সাজাতে পারেন। এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে CSS গ্রিড বা ফ্লেক্সবক্স ব্যবহার করে একটি গ্রিড ভিত্তিক লেআউট তৈরি করা যায়।

1. CSS Grid Layout ব্যবহার করে

CSS Grid লেআউট খুবই শক্তিশালী একটি টুল যা ডেভেলপারদের গ্রিড স্টাইলের লেআউট ডিজাইন করতে সাহায্য করে। এতে সহজেই বিভিন্ন ধরনের কলাম, সারি এবং এলিমেন্ট পজিশনিং করা যায়।

উদাহরণ: CSS Grid দিয়ে লেআউট তৈরি

ধরা যাক, আমরা একটি সাধারণ লেআউট তৈরি করতে যাচ্ছি যেখানে দুটি সাইডবার এবং একটি প্রধান কনটেন্ট অঞ্চল থাকবে।

প্রথমে, AppComponent এর টেম্পলেট তৈরি করুন:

<!-- app.component.html -->
<div class="grid-container">
  <header class="header">
    <h1>My Angular App</h1>
  </header>

  <nav class="sidebar-left">
    <p>Left Sidebar</p>
  </nav>

  <main class="main-content">
    <p>Main Content Area</p>
  </main>

  <nav class="sidebar-right">
    <p>Right Sidebar</p>
  </nav>

  <footer class="footer">
    <p>Footer Content</p>
  </footer>
</div>

তারপর, CSS Grid ব্যবহার করে লেআউটটি স্টাইল করুন:

/* app.component.css */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Left Sidebar, Main Content, Right Sidebar */
  grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
  grid-template-areas:
    "header header header"
    "sidebar-left main-content sidebar-right"
    "footer footer footer";
  gap: 10px;  /* Cell spacing */
}

.header {
  grid-area: header;
  background-color: #f4f4f4;
  padding: 10px;
}

.sidebar-left {
  grid-area: sidebar-left;
  background-color: #e0e0e0;
  padding: 10px;
}

.main-content {
  grid-area: main-content;
  background-color: #fff;
  padding: 10px;
}

.sidebar-right {
  grid-area: sidebar-right;
  background-color: #e0e0e0;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #f4f4f4;
  padding: 10px;
}

এখানে:

grid-template-columns এর মাধ্যমে ৩টি কলাম (লেফট সাইডবার, প্রধান কনটেন্ট, রাইট সাইডবার) তৈরি করা হয়েছে।
grid-template-areas ব্যবহার করে এলিমেন্টগুলোকে নির্দিষ্ট এলাকায় (header, sidebar-left, main-content, sidebar-right, footer) পজিশন করা হয়েছে।
gap প্রপার্টি দিয়ে সেলগুলোর মধ্যে স্পেস রাখা হয়েছে।

2. Flexbox ব্যবহার করে Grid ভিত্তিক লেআউট

CSS Flexbox একটি আরও সাধারণ এবং সহজ উপায়, যা এক্সপ্যান্সিভ গ্রিড লেআউট তৈরির জন্য ব্যবহার করা যেতে পারে। এটি উপাদানগুলোকে এক লাইনে সাজানোর জন্য ব্যবহার করা হয়, কিন্তু চাইলে কলাম এবং সারি তৈরি করতেও এটি খুব কার্যকর।

উদাহরণ: Flexbox দিয়ে লেআউট তৈরি

AppComponent এর টেম্পলেট:

<!-- app.component.html -->
<div class="flex-container">
  <header class="header">
    <h1>My Angular App</h1>
  </header>

  <div class="sidebar-left">
    <p>Left Sidebar</p>
  </div>

  <main class="main-content">
    <p>Main Content Area</p>
  </main>

  <div class="sidebar-right">
    <p>Right Sidebar</p>
  </div>

  <footer class="footer">
    <p>Footer Content</p>
  </footer>
</div>

Flexbox ব্যবহার করে স্টাইল করা:

/* app.component.css */
.flex-container {
  display: flex;
  flex-direction: column; /* Vertically stack elements */
  height: 100vh;
}

.header {
  background-color: #f4f4f4;
  padding: 10px;
  text-align: center;
}

.footer {
  background-color: #f4f4f4;
  padding: 10px;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 10px;
}

.sidebar-left,
.sidebar-right {
  background-color: #e0e0e0;
  padding: 10px;
}

.flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 10px;
}

এখানে:

.flex-container এর মধ্যে আমরা display: flex ব্যবহার করেছি, যা উপাদানগুলোকে একে অপরের উপরে সাজানোর জন্য ডিজাইন করা।
.flex-container grid-template-columns ব্যবহার করে একটি সাধারণ গ্রিড তৈরি করা হয়েছে যাতে তিনটি কলাম থাকে।

Content added By

Md Azizur Rahman

Grid ভিত্তিক লেআউট তৈরি

Grid ভিত্তিক লেআউট তৈরি

1. CSS Grid Layout ব্যবহার করে

উদাহরণ: CSS Grid দিয়ে লেআউট তৈরি

2. Flexbox ব্যবহার করে Grid ভিত্তিক লেআউট

উদাহরণ: Flexbox দিয়ে লেআউট তৈরি

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion